Getting A List of Contents 1 Using List Embedding

Latest update: July 2013

In this tutorial, we will show one of ways how to get a list of contents stored on the FlashAir. We will use a content list in a HTML file returned by the web server on the FlashAir.

The list is embedded as a JavaScript part in a HTML file sent from FlashAir. To make it visible on screen, we need to generate another HTML document from the list by another JavaScript program.
In this tutorial, we will use jQuery to reduce the lines of code.

Content List Embedding

When you input a URL specifying a directory on the FlashAir like http://flashair/DCIM in the address bar of your web browser, a web server on the FlashAir will return a HTML document.
This HTML document is generated from the template file stored on the FlashAir as /SD_WLAN/List.htm. On generating file, the server embed the content list in the directory specified by URL by replacing the comment tag <!--WLANSDJLST--> in the template file. The embedded content list is actually a JavaScript codelet to make a variable wlansd, which is an array containing the list of contents.

We will show an example when we access to http://flashair/.

This is a part of the original template file stored at /SD_WLAN/List.htm on the FlashAir:

wlansd = new Array();
<!--WLANSDJLST-->

If your FlashAir uses a firmware 1.00s, the codelet above will be modified as follows:

wlansd = new Array();
wlansd[0]=",DCIM,0,16,16602,18432";
wlansd[1]=",FLASHAIR.EXE,7711563,32,16602,18432";
wlansd[2]=",PRIVATE,0,16,17034,34163";

If your FlashAir uses a firmware 2.00s, the original codelet shown above will be modified as follows:

wlansd = new Array();
wlansd.push({"r_uri":"/", "fname":"DCIM", "fsize:":0,"attr":16,"fdate":16602,"ftime":18432});
wlansd.push({"r_uri":"/", "fname":"FLASHAIR.EXE", "fsize:":7711563,"attr":32,"fdate":16602,"ftime":18432});
wlansd.push({"r_uri":"/", "fname":"PRIVATE", "fsize:":0,"attr":16,"fdate":17034,"ftime":34163});

From the next part, we will insert a JavaScript program containing the comment tag to show a list of contents on screen.

Preparation

We need jQuery . Please download it from the site.

The downloaded file has a name like jquery-x.yy.z,min.js（ x, yy, z are numbers). However, FlashAir firmware version 1.00s does not permit a long file name, so we will need to shorten the name. We will save it as /SD_WLAN/js/jquery.js on the FlashAir in this tutorial.

Creating View Layout

First, we make a HTML which is a main contents of the Browser Utility. Actually, it has almost no elements to show on screen, but it will do two improtant things: 1) loading external JavaScript file, and 2) preparing <div> tag as a place holder for the JavaScript program to make visual elements shown on screen.

We must save the HTML file as a /SD_WLAN/List.htm on the FlashAir card.

/SD_WLAN/List.htm 

<!doctype html>
<html>
<head>
<title>FlashAir</title>
<meta charset="UTF-8">
<script type="text/javascript" src="/SD_WLAN/js/jquery.js"></script>
<script type="text/javascript" src="/SD_WLAN/js/main.js"></script>
<script type="text/javascript">
wlansd = new Array();
<!--WLANSDJLST-->
</script>
</head>
<body>
<div id="header">
<h1>header</h1>
</div>
<hr>
<div id="list">
</div>
<hr>
<div id="footer">
footer
</div>
</body>
</html>
  • Lines 6,7:
    This code loads jquery.js and main.js. main.js will be created next section.
  • Line 9:
    This code declares an Array instance to prepare for an embedded content as a replacement of the comment line (line 10).
  • Line 18:
    This code creates div tag having a value list for an attribute id. In following section, we will insert HTML elements for the content list here.

Generating HTML elements

We will create a JavaScript program which parse the embedded content list to insert HTML elements into the HTML file we created before.

Format of the embedded content list is different between the firmware version 1.00s and 2.00s, so we will create two helper functions: isV1() for checking the firmware version and convertFileList() for converting the format of the content list to that of the version 2.00s.

There are no restriction about the file name of the program. In this tutorial, we create it as a /SD_WLAN/js/main.js on the FlashAir.

/SD_WLAN/js/main.js 

// JavaScript Document

// Judge the card is V1 or V2.
function isV1(wlansd) {
    if ( wlansd.length == undefined || wlansd.length == 0 ) {
        // List is empty so the card version is not detectable. Assumes as V2.
        return false;
    } else if ( wlansd[0].length != undefined ) {
        // Each row in the list is array. V1.
        return true;
    } else {
        // Otherwise V2.
        return false;
    }
}
// Convert data format from V1 to V2.
function convertFileList(wlansd) {
    for (var i = 0; i < wlansd.length; i++) {
        var elements = wlansd[i].split(",");
        wlansd[i] = new Array();
        wlansd[i]["r_uri"] = elements[0];
        wlansd[i]["fname"] = elements[1];
        wlansd[i]["fsize"] = Number(elements[2]);
        wlansd[i]["attr"]  = Number(elements[3]);
        wlansd[i]["fdate"] = Number(elements[4]);
        wlansd[i]["ftime"] = Number(elements[5]);
    }
}
// Callback Function for sort()
function cmptime(a, b) {
    if( a["fdate"] == b["fdate"] ) {
        return a["ftime"] - b["ftime"];
    }else{
        return a["fdate"] - b["fdate"];
    }
}
// Show file list
function showFileList(path) {
    // Clear box.
    $("#list").html('');
    // Output a link to the parent directory if it is not the root directory.
    if ( path != "/" ) {
        // Make parent path
        var parentpath = path;
        if ( parentpath[parentpath.length - 1] != '/' ) {
            parentpath += '/';
        }
        parentpath += '..';
        // Make a link to the parent path.
        $("#list").append(
            $("<div></div>").append(
                $('<a href="' + parentpath + '" class="dir">..</a>')
            )
        );
    }
    $.each(wlansd, function() {
        var file = this;
        // Skip hidden file.
        if( file["attr"] & 0x02 ) {
            return;
        }
        // Make a link to directories and files.
        var filelink = $('<a></a>').attr('href',file["r_uri"]+'/'+file["fname"]);
        var caption = file["fname"];
        var fileobj = $("<div></div>");
        // Append a file entry or directory to the end of the list.
        $("#list").append(
            fileobj.append(
                filelink.append(
                    caption
                )
            )
        );
    });     
}
// Document Ready
$(function() {
    if ( isV1(wlansd) ) {
        convertFileList(wlansd);
    }
    wlansd.sort(cmptime);
    showFileList(location.pathname);
});
  • Lines 4-15:
    This is a helper function to determine the format of the content list is 1.00s' or not. This function returns true if the format is the version 1.00s'.
  • Lines 17-28:
    This is an another helper function to convert the format of the content list from the version 1.00s' to the version 2.00s'.
  • Lines 30-36:
    This function is a comparer by date and time of two items of the list. It is used with a sort function at line 81.
  • Lines 38-69

    For each items in the content list, we will generate an anchor ( <a>) and a division ( <div>) and append them to the place where has been prepared in the HTML in the previous section. (That is $("#list").)
  • Lines 71-77

    This is a function, called "Document Ready", is the function which will be automatically executed when the browser has completed loading this program. In this function, we will convert the data format if the firmware is the version 1.00s (lines 72-74), sort all of the content list by date (line 75), and call the function to show the content list on screen (line 76).

Result

Save the program on the FlashAir, and open your web browser on your PC or smartphone connected to the FlashAir, to check how the content list is shown.
You will see like a following screen shot.

Browser Utility Tutorial 2 Result

Sample Code

web_tutorial_02.zip (4KB)

All sample code on this page is licensed under BSD 2-Clause License